/**
 * Created by JamesZhang on 2017/5/21.
 */
import React from "react";
import {
    Route,
    Link,
    NavLink
} from "react-router-dom";
import LazyLoad from "react-lazyload";

import MyComponent from "./myComponent.js";

class DemoLazyLoadComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            images: [{
                img: require("../../images/dumps/1.jpg")
            }, {
                img: require("../../images/dumps/2.jpg")
            }, {
                img: require("../../images/dumps/3.jpg")
            }, {
                img: require("../../images/dumps/4.jpg")
            }, {
                img: require("../../images/dumps/5.jpg")
            }, {
                img: require("../../images/dumps/6.jpg")
            }, {
                img: require("../../images/dumps/7.jpg")
            }, {
                img: require("../../images/dumps/8.jpg")
            }, {
                img: require("../../images/dumps/9.jpg")
            }, ],
        };
    }
    render() {
        const {
            images
        } = this.state;
        return (
            <div className="images-list">
                {
                    images.map((item, index) => {
                        return (
                            <LazyLoad height={200} key={index} placeholder={<PlaceholderComponent />} debounce={500}>
                                <div className="img">
                                    <img src={item.img} />
                                    {
                                        /*
                                         Lazy loading images is supported out of box,
                                         no extra config needed, set `height` for better
                                         experience
                                         */
                                    }
                                </div>
                            </LazyLoad>
                        )
                    })
                }
                <div>
                    <LazyLoad height={200} once >
                    {
                        /* Once this component is loaded, LazyLoad will
                         not care about it anymore, set this to `true`
                         if you're concerned about improving performance */
                    }
                    <MyComponent />
                </LazyLoad>
                </div>
                <div>
                    <LazyLoad height={200} offset={100}>
                    {
                        /* This component will be loaded when it's top
                         edge is 100px from viewport. It's useful to
                         make user ignorant about lazy load effect. */
                    }
                    <MyComponent />
                </LazyLoad>
                </div>
                <LazyLoad height={300} offset={100}>
                    <MyComponent />
                </LazyLoad>
            </div>
        )
    }
}

class PlaceholderComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
    }
    render() {

        return (
            <h1 style={{height: "200px"}}>
                自定义的placehoder组件, 最好写一个height或min-height, 以便于更好的呈现<br/>
                loading....
            </h1>
        )
    }
}
export default DemoLazyLoadComponent;